<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .form {
      width: 800px;
      margin: 0 auto;
    }

    table {
      width: 800px;
      margin: 10px auto;
    }

    td {
      text-align: center;
    }

    .page {
      width: 800px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
    }

    .btn_wrap .active {
      background: red;
    }
  </style>
</head>

<body>
  <div class="form">
    <h2>商品名：</h2>
    <input type="text" id="goodsname">
    <h2>价格：</h2>
    <input type="text" id="price">
    <h2>数量：</h2>
    <input type="text" id="num">
    <br>
    <button id="addBtn">添加</button>
  </div>
  <div>
    <table border="1">
      <thead>
        <tr>
          <th>id</th>
          <th>商品名</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="mybody">
        <!-- <tr>
          <td>id</td>
          <td>商品名</td>
          <td>单价</td>
          <td>数量</td>
          <td>小计</td>
          <td><button>删除</button></td>
        </tr> -->
      </tbody>
    </table>
    <div class="page">
      <button class="prev">上一页</button>
      <div class="btn_wrap">
        <button class="active">1</button>
        <button>2</button>
        <button>3</button>
      </div>
      <button class="next">下一页</button>
    </div>
  </div>
  <script src="./js/jquery-3.4.1.min.js"></script>
  <script>
    $("#addBtn").click(function () {
      if ($("#num").val() && /^\d*$/.test($("#num").val())) {
        $.ajax({
          url: "http://127.0.0.1:3000/add",
          type: "post",
          data: {
            goodsname: $("#goodsname").val(),
            price: $("#price").val(),
            num: $("#num").val(),
          },
          success: function (res) {
            alert("添加成功")
            var maxPage = $(".btn_wrap button").last().html()
            loadTable(maxPage, 3)
            // 清空输入框
            $("#goodsname").val("")
            $("#price").val("")
            $("#num").val("")
          }
        })
      } else {
        alert("输入的不是数字")
      }
    })
    // 加载表格
    function loadTable(page, pageSize) {
      $.ajax({
        url: "http://127.0.0.1:3000/pageList",
        type: "post",
        data: {
          page: page,
          pageSize: pageSize
        },
        success: function (res) {
          console.log(res)
          // 生成分页
          var pages = Math.ceil(Number(res.count) / Number(res.pageSize))//计算页码
          console.log(pages)
          var pagestr = ''
          for (var i = 1; i <= pages; i++) {
            pagestr += `<button>${i}</button>`
          }

          $(".btn_wrap").html(pagestr)
          $(".btn_wrap button").eq(page - 1).addClass("active").siblings().removeClass("active")
          // ----------------
          var str = '';
          $.each(res.data, function (index, ele) {
            str += `  <tr>
              <td>${index + 1}</td>
              <td>${ele.goodsname}</td>
              <td>${ele.price}</td>
              <td>${ele.num}</td>
              <td>${ele.price * ele.num}</td>
              <td><button onclick="del('${ele._id}')">删除</button></td>
            </tr>`
          })
          $("#mybody").html(str);
        }
      })
    }
    loadTable(1, 3)
    //删除
    function del(_id) {
      $.ajax({
        url: "http://127.0.0.1:3000/del",
        type: "get",
        data: {
          _id: _id
        },
        success: function () {
          var nowPage = $(".btn_wrap .active").html();//获取当前页
          alert("删除成功")
          loadTable(nowPage, 3)
        }
      })
    }
    // 点击页面改变页面
    $(".btn_wrap").on("click", "button", function () {
      var page = $(this).html();

      loadTable(page, 3)
    })
    // 上一页点击
    $(".prev").click(function () {
      var nowPage = $(".btn_wrap .active").html();//获取当前页
      nowPage--;
      if (nowPage <= 1) {
        nowPage = 1;
      }
      loadTable(nowPage, 3)
    })
    // 下一页点击
    $(".next").click(function () {
      var nowPage = $(".btn_wrap .active").html();//获取当前页
      nowPage++;
      var maxPage = $(".btn_wrap button").last().html()
      if (nowPage >= maxPage) {
        nowPage = maxPage;
      }
      loadTable(nowPage, 3)
    })

  </script>
</body>

</html>